<div class="twy-video-agox spaced-section">
 <div class="agox-width{% unless section.settings.full_width %} page-width{% endunless %}">
  <div class="video_height">
    <div class="video_list" id="video_list">
      {% if section.settings.text != blank %}
         <div class="text center">{{ section.settings.text }}</div>
      {% endif %}
      {% if section.settings.heading != blank %}
         <div class="heading">{{ section.settings.heading }}</div>
      {% endif %}
      {%- if section.settings.text_1 != blank -%}
        <div class="text center">
          {{ section.settings.text_1 }}
        </div>
    {%- endif -%}
    </div>


  <div class="video-width">
    <div class="center">
      {% if section.settings.video != blank %}
        {{ section.settings.video }}
      {% endif %}
    </div>
  </div>
  </div>
 </div>
</div>




<script>
  $(window).ready(function() {
    var tooSmall = false;
    var controller = null;
    var maxWidth = 991;
  
    if( $(window).width() < maxWidth ) {
      tooSmall = true;
    }


    function initScrollMagic() {
      const tenwaysAgox = document.querySelector(".agox-width");
      const tenwaysAgoxWidth = tenwaysAgox.querySelector(".video-width");
      const tenwaysAgoxText = tenwaysAgox.querySelector(".video_list");
    
      const AgoxController = new ScrollMagic.Controller();
    
      const AgoxWidthAnim = TweenMax.fromTo(tenwaysAgoxWidth, 1, { width: '100%' }, { width: '40%' });
      const AgoxTextAnim = TweenMax.fromTo(tenwaysAgoxText, 1, { top: '50%' , color: '#fff' }, { top: '-20%', color: '#000' });

      let scene1 = new ScrollMagic.Scene({
        duration: 500,
        triggerElement: tenwaysAgox,
        triggerHook: .4
      })
      .setPin(tenwaysAgox)
      .addTo(AgoxController); 
    
      let scene2 = new ScrollMagic.Scene({
        duration: 500,
        triggerElement: tenwaysAgox,
        triggerHook: 0.3
      })
      .setTween(AgoxWidthAnim)
      .addTo(AgoxController);   
    
    
      let scene3 = new ScrollMagic.Scene({
        duration: 500,
        triggerElement: tenwaysAgox,
        triggerHook: 0.3
      })
      .setTween(AgoxTextAnim)
      .addTo(AgoxController);   

      }


    
      if( !tooSmall ) {
        initScrollMagic();
      }

    $(window).resize( function() {
      var wWidth = $(window).width();
      if( wWidth < maxWidth ) {
        if( AgoxController !== null && AgoxController !== undefined ) {
          AgoxController = AgoxController.destroy( true );
        }
      } else if( wWidth >= maxWidth ) {
        if( AgoxController === null || AgoxController === undefined ) {
          initScrollMagic();
        }
      }
    });


  })
</script>  



{% schema %}
  {
    "name": "Twy video AGOX",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width tenways-video_height element_top",
    "settings": [
      {
        "type": "text",
        "id": "text",
        "label": "Text"
      }, 
      {
        "type": "text",
        "id": "heading",
        "default": "Video",
        "label": "t:sections.video.settings.heading.label"
      },
       {
        "type": "richtext",
        "id": "text_1",
        "label": "Text 1"
      }, 
      {
        "type": "html",
        "id": "video",
        "label": "Video"
      }, {
        "type": "checkbox",
        "id": "full_width",
        "label": "t:sections.video.settings.full_width.label",
        "default": false
      }
    ],
    "presets": [
      {
        "name": "Twy video AGOX"
      }
    ]
  }
{% endschema %}



